<template>
  <section style="height: 100%;background: #fff;">
    <header></header>
    <div class="cell_box">
      <yd-cell-item>
        <span slot="left">注册手机号</span>
        <yd-input slot="right" v-model="input8" class="input_pad"  readonly :show-clear-icon="false"></yd-input>
      </yd-cell-item>
      <yd-cell-item>
        <span slot="left">输入验证码</span>
        <input type="text" slot="right" placeholder="请输入验证码"class="input_pad"  v-model="yanzhengId">
        <yd-sendcode slot="right"
                     v-model="start1"
                     @click.native="sendCode1"
                     type="warning"
        ></yd-sendcode>

      </yd-cell-item>
      <yd-cell-item>
        <span slot="left">新密码</span>
        <yd-input type="password" slot="right" max="20" ref="psd1" v-model="psd1" required :regex="psdReg" :show-required-icon="false" :show-success-icon="false" :show-error-icon="false"  placeholder="请输入6到20位数字或字母" style="padding-left: .96rem"></yd-input>
      </yd-cell-item>
      <yd-cell-item>
        <span slot="left">确认新密码</span>
        <yd-input slot="right" type="password" max="20" v-model="psd2" required  :show-required-icon="false" :show-success-icon="false" :show-error-icon="false"  placeholder="请再次输入新密码" class="input_pad"></yd-input>
      </yd-cell-item>
    </div>

    <yd-button size="large" type="danger"  class="sure_btn" @click.native="sureBtn()">保存</yd-button>
  </section>
</template>

<script>
  export default {
    name:'modifyPsd',
    data() {
      return {
        start1: false,
        input8:'',
        yanzhengId:'',
        psd1:'',
        psd2:'',
        code:'',
        psdReg:'/^[a-zA-Z0-9@_.]{6,20}$/',
        // intwo:false,
      }
    },
    methods: {
      sendCode1() {
        let that = this;
        this.$dialog.loading.open('发送中...');
        this.$ajax.post(window.g.apiUrl+'/util/message.do',JSON.stringify({
          phone:this.input8,
          flag:"2"
        }))
          .then((response)=>{
            setTimeout(() => {


              that.$dialog.loading.close();

              if(response.data.code == 200){
                that.start1 = true;
                that.$dialog.toast({
                  mes: '已发送',
                  icon: 'success',
                  timeout: 1500
                });
                that.code = response.data.data;
              }else{
                that.$dialog.toast({
                  mes: '验证码发送次数过多，请稍后重试',
                  icon:'error',
                  timeout: 1500,
                });
              }

            }, 500);


          }).catch(()=>{
        })
      },
      sureBtn(){
        const psd1 = this.$refs.psd1;
        const that = this;
        if(this.yanzhengId == ''){
          this.$dialog.notify({
            mes:'请输入验证码',
            timeout:1500,
          })
          return;
        }
        if(this.yanzhengId != this.code){
          this.$dialog.notify({
            mes: '验证码输入有误',
            timeout: 1500,
          });
          return;
        }
        if(psd1.valid == false){
          this.$dialog.notify({
            mes:'请完善新密码',
            timeout:1500,
          })
          return;
        }
        if(this.psd1 != this.psd2){
          this.$dialog.notify({
            mes:'两次密码输入不一致',
            timeout:1500,
          })
          return;
        }
        that.$dialog.loading.open('正在提交');
        setTimeout(()=>{

          that.$ajax.post(window.g.apiUrl+'/user/upPass.do',JSON.stringify({
          pass:that.psd1,
          phoneNum:that.input8,
        })).then((response)=>{
          that.$dialog.loading.close();
          if(response.data.code == 200){
            that.$dialog.toast({
              mes: '修改成功',
              icon:'success',
              timeout: 1000,
              callback: () => {
                that.$router.push('/mine')
              }
            });
          }else{
            that.$dialog.toast({
              mes: '修改失败，请稍后重试',
              icon:'error',
              timeout: 1500,
            });
          }
        }).catch(()=>{
        })
        },150)

      },
    },
    created(){
      const that = this;
      this.$ajax.post(window.g.apiUrl+'/user/isLog.do')
        .then((response)=>{
          if(response.data.code != 200){
            this.$dialog.notify({
              mes: '登录失效，正在跳转至登录页面',
              timeout: 1500,
              callback:()=>{
                that.$router.push('/login');
              }
            });
          }
        }).catch(()=>{
      })
      let userid = localStorage.getItem('userid');
      this.$ajax.post(window.g.apiUrl+'/user/getUser.do',JSON.stringify({
        id:userid,
      })).then((response)=>{
        that.input8 = response.data.data.phone;
      }).catch(()=>{
      })
    }
  }
</script>

<style scoped>
  header{
    width: 100%;
    height: 1.9rem;
    background-image: url("../../assets/mine/psd_bg.png");
    background-size: 100% 100%;
  }
  .sure_btn{
    position: fixed;
    bottom: 25px;
    width: 96%;
    margin-left: 2%;
  }
  .cell_box{
    box-shadow: 0px 5px 10px rgba(194,194,194,.2);
  }
  .input_pad{
    padding-left: .4rem;
  }

</style>
